<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>保养单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">返回</el-button>
      </div>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="保养单号">{{ maintenanceInfo.maintenanceCode }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{ maintenanceInfo.equipmentCode }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ maintenanceInfo.equipmentName }}</el-descriptions-item>
        <el-descriptions-item label="保养类型">{{ maintenanceTypeFormat(maintenanceInfo) }}</el-descriptions-item>
        <el-descriptions-item label="保养状态">
          <el-tag :type="maintenanceInfo.status === '0' ? 'warning' : maintenanceInfo.status === '1' ? 'primary' : 'success'">
            {{ statusFormat(maintenanceInfo) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="负责人">{{ maintenanceInfo.maintenancePerson }}</el-descriptions-item>
        <el-descriptions-item label="计划开始日期">{{ parseTime(maintenanceInfo.planStartDate, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="计划结束日期">{{ parseTime(maintenanceInfo.planEndDate, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="实际开始日期">{{ maintenanceInfo.actualStartDate ? parseTime(maintenanceInfo.actualStartDate, '{y}-{m}-{d}') : '-' }}</el-descriptions-item>
        <el-descriptions-item label="实际结束日期">{{ maintenanceInfo.actualEndDate ? parseTime(maintenanceInfo.actualEndDate, '{y}-{m}-{d}') : '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">保养项目</el-divider>

      <el-table :data="maintenanceItems" border style="width: 100%">
        <el-table-column prop="itemName" label="保养项目" width="180" />
        <el-table-column prop="standard" label="标准" width="180" />
        <el-table-column label="结果" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.result === '1' ? 'success' : scope.row.result === '0' ? 'danger' : 'info'">
              {{ scope.row.result === '1' ? '正常' : scope.row.result === '0' ? '异常' : '未检查' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>

      <el-divider content-position="left">保养备注</el-divider>
      <div style="padding: 10px;">{{ maintenanceInfo.remark || '无' }}</div>

      <div class="action-buttons" v-if="maintenanceInfo.status !== '2'">
        <el-button type="primary" @click="handleComplete" v-if="maintenanceInfo.status === '1'">完成保养</el-button>
        <el-button type="success" @click="handleStart" v-if="maintenanceInfo.status === '0'">开始保养</el-button>
        <el-button type="warning" @click="handleEdit">编辑</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MaintenanceOrderDetail',
  data() {
    return {
      // 保养单信息
      maintenanceInfo: {},
      // 保养项目列表
      maintenanceItems: [],
      // 保养类型选项
      maintenanceTypeOptions: [
        { dictLabel: '日常保养', dictValue: '0' },
        { dictLabel: '周期保养', dictValue: '1' },
        { dictLabel: '临时保养', dictValue: '2' }
      ],
      // 状态选项
      statusOptions: [
        { dictLabel: '待执行', dictValue: '0' },
        { dictLabel: '执行中', dictValue: '1' },
        { dictLabel: '已完成', dictValue: '2' }
      ]
    };
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    if (id) {
      this.getInfo(id);
    }
  },
  methods: {
    /** 获取保养单详细信息 */
    getInfo(id) {
      // 模拟数据，实际应从后端获取
      setTimeout(() => {
        this.maintenanceInfo = {
          id: id,
          maintenanceCode: 'BY20230701001',
          equipmentCode: 'SB001',
          equipmentName: '数控车床',
          maintenanceType: '1',
          status: '1',
          planStartDate: new Date('2023-07-01'),
          planEndDate: new Date('2023-07-01'),
          actualStartDate: new Date('2023-07-01'),
          actualEndDate: null,
          maintenancePerson: '张三',
          remark: '按计划进行中'
        };
        
        this.maintenanceItems = [
          {
            itemName: '检查电机',
            standard: '无异常噪音',
            result: '1',
            remark: '正常'
          },
          {
            itemName: '检查传动部件',
            standard: '无松动、磨损',
            result: '1',
            remark: '正常'
          },
          {
            itemName: '润滑',
            standard: '按要求添加润滑油',
            result: '',
            remark: '待执行'
          }
        ];
      }, 300);
    },
    // 保养类型字典翻译
    maintenanceTypeFormat(row) {
      return this.selectDictLabel(this.maintenanceTypeOptions, row.maintenanceType);
    },
    // 状态字典翻译
    statusFormat(row) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 字典翻译
    selectDictLabel(datas, value) {
      if (value === undefined) {
        return "";
      }
      var actions = [];
      Object.keys(datas).some(key => {
        if (datas[key].dictValue == ('' + value)) {
          actions.push(datas[key].dictLabel);
          return true;
        }
      })
      return actions.join('');
    },
    /** 开始保养 */
    handleStart() {
      this.$modal.confirm('确认开始执行该保养单？').then(() => {
        // 实际应调用后端API
        this.maintenanceInfo.status = '1';
        this.maintenanceInfo.actualStartDate = new Date();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    /** 完成保养 */
    handleComplete() {
      this.$modal.confirm('确认完成该保养单？').then(() => {
        // 实际应调用后端API
        this.maintenanceInfo.status = '2';
        this.maintenanceInfo.actualEndDate = new Date();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    /** 编辑保养单 */
    handleEdit() {
      const id = this.maintenanceInfo.id;
      this.$router.push({ path: `/sb/Maintenance-sheet/edit/${id}` });
    },
    /** 返回按钮 */
    cancel() {
      this.$router.push({ path: "/sb/Maintenance-sheet" });
    }
  }
}
</script>

<style scoped>
.action-buttons {
  margin-top: 20px;
  text-align: center;
}
</style> 